<template>
  <view>
    <view
      v-for="item in artworksList"
      :key="item.id"
      class="wechat-circle-container"
      @click="handleArtworks(item)">
      <view class="wechat-circle-content flex jb">
        <image
          :src="avatar"
          mode="aspectFill"
          class="author-avatar"
        />
        <view class="circle-content">
          <view class="circle-text">
            <u-parse :html="item.wechat_circle_content"></u-parse>
          </view>
          <view class="image-list-content flex fw">
            <image
              v-for="(image_item, index) in item.font_attribute"
              :key="index"
              :src="image_item.cover_url + '?x-oss-process=image/resize,w_200'"
              mode="aspectFill"
              class="image-item"
            />
          </view>
          <view class="circle-footer">
            <view class="show-status-container flex ac je">
              <view v-if="item.audit_status === 'review'" class="wait status">
                <u-icon name="clock" size="28"></u-icon>
                <text style="padding-left: 6rpx">审核中</text>
              </view>
              <view v-else-if="item.audit_status === 'reject'" class="reject status">
                <u-icon name="error-circle" size="28"></u-icon>
                <text style="padding-left: 6rpx">违规</text>
              </view>
              <view v-else-if="item.audit_status === 'success'" class="status">
                <u-icon name="download" size="28"></u-icon>
                <text style="padding-left: 6rpx">{{ item.download_num }}</text>
              </view>

              <view class="status delete" @click.stop="handleDelete(item)">
                <u-icon name="trash" size="28"></u-icon>
                <text style="padding-left: 6rpx">删除</text>
              </view>

              <view class="status edit">
                <u-icon name="edit-pen" size="28"></u-icon>
                <text style="padding-left: 6rpx">编辑</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    artworksList: {
      type: Array,
      default: () => {
        return []
      }
    },
    isBatch: {
      type: Boolean,
      default: false
    },
    isAlbum: {
      type: Boolean,
      default: false
    },
    isMini: {
      type: Boolean,
      default: true
    },
    avatar: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      name: '列表'
    }
  },
  methods: {

    // 点击删除
    handleDelete(rowDta) {
      this.$emit('handleDeleteSign', [ rowDta.id ]);
    },

    // 点击编辑
    handleArtworks(rowDta, index) {
      if (!this.isBatch) {
        this.$emit('handleArtworks', rowDta);
        return;
      }
      this.$emit('handleCheckBox', index);
    },
  }
}
</script>

<style lang="scss" scoped>
  .wechat-circle-container{
    box-shadow: 0rpx 8rpx 10rpx 2rpx #EEEEF3;
    margin-bottom: 24rpx;
    border-radius: 16rpx;
    padding: 24rpx;

    .author-avatar{
      width: 80rpx;
      height: 80rpx;
      border-radius: 8rpx;
    }

    .circle-content{
      margin-left: 24rpx;
      width: calc(100% - 104rpx);

      .circle-text{
        font-size: 24rpx;
        margin-bottom: 24rpx;
      }

      .image-list-content{
        width: 480rpx;
        margin-bottom: 24rpx;

        .image-item{
          width: 154rpx;
          height: 154rpx;
          margin-bottom: 8rpx;
        }

        .image-item:nth-child(3n - 1) {
          margin-left: 8rpx;
          margin-right: 8rpx;
        }
      }

      .circle-footer{
        width: 480rpx;
      }

      .show-status-container{
        width: 480rpx;
        flex-direction: row;
      }

      .status{
        background: #f3e7d2;
        border: 2rpx solid $uni-color-warning;
        padding: 6rpx;
        border-radius: 8rpx;
        width: 128rpx;
        font-size: 24rpx;
        display: flex;
        justify-content: center;
        align-content: center;
        color: $uni-color-warning;
      }

      .delete{
        margin-left: 24rpx;
        margin-right: 24rpx;
        background: #f3d8d5;
        color: $uni-color-error;
        border-color: $uni-color-error;
      }

      .edit{
        background: #f3f7fb;
        color: $uni-color-primary;
        border-color: $uni-color-primary;
      }
    }
  }
</style>
